import React, { useEffect, useState } from "react";
import * as echarts from "echarts";
import Echarts from "../../components/Echarts";
import { Col, Row, Card, Table } from "antd";
import * as Icon from "@ant-design/icons"; //图标
import "../home/home.css";
import { getData } from "../../api";
const Home = () => {
  const userImg = require("../../assets/images/user.png");
  //react中插入图片不能像HTML中那样插入，必须先引入图片作为react的模块
  //JSX 中引入图片时，路径应该是相对于 JavaScript 文件的，而不是相对于 HTML 文件的。
  //因为依赖是空数组，所有在初始化时执行，就是dom渲染晚后，相当于挂载阶段
  useEffect(() => {
    getData().then(({ data }) => {
      //把data从res中解构出来
      // console.log(data.data);
      const { tableData, orderData, userData, videoData } = data.data; //把tableData从data.data中解构出来
      setTableData(tableData);

      //对echarts数据的组装
      const order = orderData; //折线图数据
      const user = userData; //柱状图数据
      const video = videoData; //柱状图数据

      //x轴的数据
      const xData = order.date;

      //series数据组装
      const keyArray = Object.keys(order.data[0]);
      // console.log(keyArray)//keyArray就是所有的手机
      const series = [];
      keyArray.forEach((key) => {
        series.push({
          neme: key,
          data: order.data.map((item1) => item1[key]),
          // 让原先三种手机数据的item变成只保留当前key的数据
          type: "line",
        });
      });
      setEchartData({
        order: {
          xData,
          series,
        },
        user: {
          xData: user.map((item2) => item2.date),
          series: [
            {
              name: "新增用户",
              data: user.map((item2) => item2.new),
              type: "bar",
            },
            {
              name: "活跃用户",
              data: user.map((item2) => item2.active),
              type: "bar",
            },
          ],
        },
        video: {
          series: [
            {
              type: "pie",
              radius: "50%",
              data: video,
            },
          ],
        },
      });
    });
  }, []);
  //创建echarts的响应数据
  const [echartData, setEchartData] = useState({});

  //定义table数据
  const [tableData, setTableData] = useState([]);
  //table的数据
  const columns = [
    {
      title: "课程",
      dataIndex: "name",
    },
    {
      title: "今日购买",
      dataIndex: "todayBuy",
    },
    {
      title: "本月购买",
      dataIndex: "monthBuy",
    },
    {
      title: "总购买",
      dataIndex: "totalBuy",
    },
  ];
  //订单的数据
  const countData = [
    {
      name: "今日支付订单",
      value: 1234,
      icon: "CheckCircleOutlined",
      color: "#2ec7c9",
    },
    {
      name: "今日收藏订单",
      value: 3421,
      icon: "ClockCircleOutlined",
      color: "#ffb980",
    },
    {
      name: "今日未支付订单",
      value: 1234,
      icon: "CloseCircleOutlined",
      color: "#5ab1ef",
    },
    {
      name: "本月支付订单",
      value: 1234,
      icon: "CheckCircleOutlined",
      color: "#2ec7c9",
    },
    {
      name: "本月收藏订单",
      value: 3421,
      icon: "ClockCircleOutlined",
      color: "#ffb980",
    },
    {
      name: "本月未支付订单",
      value: 1234,
      icon: "CloseCircleOutlined",
      color: "#5ab1ef",
    },
  ];
  const iconToElement = (name) => React.createElement(Icon[name]);
  //动态获取icon元素，因为react里只能操作react元素，value,name这种的外面加个{}，icon就要转换
  //Icon就是引入的第三方组件，Icon[name]就是具体的组件名字。
  return (
    <div>
      <Row className="home">
        <Col span={8}>
          <Card hoverable>
            <div className="user">
              <img src={userImg}></img>
              <div className="userinfo">
                <p className="name">Admin</p>
                <p className="access">guan</p>
              </div>
            </div>
            <div className="login-info">
              <p>
                <span>上次登录时间：</span>
                <span>2021-9-9</span>
              </p>
              <p>
                <span>上次登录地点：</span>
                <span>上海</span>
              </p>
            </div>
          </Card>
          <Card hoverable>
            <Table
              rowKey={"name"}
              columns={columns}
              dataSource={tableData}
              pagination={false}
            />
          </Card>
        </Col>
        <Col span={16}>
          <div className="num">
            {countData.map((item, index) => {
              return (
                <Card hoverable>
                  <div className="icon" style={{ background: item.color }}>
                    {iconToElement(item.icon)}
                  </div>
                  <div className="detail">
                    <div className="num">￥{item.value}</div>
                    <div className="txt">{item.name}</div>
                  </div>
                </Card>
              );
            })}
          </div>
          {echartData.order && (
            <Echarts
              chartData={echartData.order}
              style={{ height: "280px", width: "800px" }}
            />
          )}
          <div className="graph">
            {echartData.user && (
              <Echarts
                chartData={echartData.user}
                style={{ height: "280px", width: "50%" }}
              />
            )}
            {echartData.video && (
              <Echarts
                chartData={echartData.video}
                style={{ height: "280px", width: "50%" }}
                isAxisChart = {false} 
              />
            )}
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default Home;
